<template>
    <div class="warpper-box">
       <a-row class="custom-check-block" :gutter="15">
          <a-col :span="8">
            <a-card title="签约列表" style="margin-bottom: 15px">
              <span slot="extra">
                <a-checkbox :checked="signCheckAll" @change="signCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="signKey" :options="signOptions"></a-checkbox-group>
            </a-card>
            <a-card title="任务详情（导入人员明细）" style="margin-bottom: 15px">
              <span slot="extra">
                <a-checkbox :checked="taskUserCheckAll" @change="taskUserCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="taskUserKey" :options="taskUserOptions"></a-checkbox-group>
            </a-card>
            <a-card title="任务详情（报名人员明细）">
              <span slot="extra">
                <a-checkbox :checked="taskEnrollCheckAll" @change="taskEnrollCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="taskEnrollKey" :options="taskEnrollOptions"></a-checkbox-group>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card title="任务详情（预结算历史记录）" style="margin-bottom: 15px">
              <span slot="extra">
                <a-checkbox :checked="taskSttleCheckAll" @change="taskSttleCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="taskSttleKey" :options="taskSttleOptions"></a-checkbox-group>
            </a-card>
            <a-card title="结算列表" style="margin-bottom: 15px">
              <span slot="extra">
                <a-checkbox :checked="sttleCheckAll" @change="sttleCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="sttleKey" :options="sttleOptions"></a-checkbox-group>
            </a-card>
            <a-card title="结算详情">
              <span slot="extra">
                <a-checkbox :checked="sttleUserCheckAll" @change="sttleUserCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="sttleUserKey" :options="sttleUserOptions"></a-checkbox-group>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card title="开票列表（非统计）（待审核-已开票）" style="margin-bottom: 15px">
              <span slot="extra">
                <a-checkbox :checked="billingCheckAll" @change="billingCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="billingKey" :options="billingOptions"></a-checkbox-group>
            </a-card>
            <a-card title="发放明细">
              <span slot="extra">
                <a-checkbox :checked="sttleGrantCheckAll" @change="sttleGrantCheckAllChange">全选</a-checkbox>
              </span>
              <a-checkbox-group v-model="sttleGrantKey" :options="sttleGrantOptions"></a-checkbox-group>
            </a-card>
          </a-col>
        </a-row>

        <div class="footer-btn">
            <a-button icon="logout" type="danger" @click="clearData">重置</a-button>
            <a-button key="back" icon="logout" class="ant-btn-warning" @click="close">返回</a-button>
            <a-button type="primary" @click="saveSubmit">提交配置</a-button>
        </div>

    </div>
</template>

<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import { sysBaseFiledAdd,sysBaseGetRoleIdFiled } from '@/api/manage/base'
import {
  SIGN_OPTIONS,
  TASK_USER_OPTIONS,
  TASK_ENROLL_OPTIONS,
  TASK_STTLE_OPTIONS,
  STTLE_OPTIONS,
  STTLE_USER_OPTIONS,
  BILLING_OPTIONS,
  STTLE_GRANT_OPTIONS
} from './modules/form'
export default {
  name: 'createField',
  data () {
    return {
      signKey:[],
      signCheckAll:false,
      signOptions:SIGN_OPTIONS,
      taskUserKey:[],
      taskUserCheckAll:false,
      taskUserOptions:TASK_USER_OPTIONS,
      taskEnrollKey:[],
      taskEnrollCheckAll:false,
      taskEnrollOptions:TASK_ENROLL_OPTIONS,
      taskSttleKey:[],
      taskSttleCheckAll:false,
      taskSttleOptions:TASK_STTLE_OPTIONS,
      sttleKey:[],
      sttleCheckAll:false,
      sttleOptions:STTLE_OPTIONS,
      sttleUserKey:[],
      sttleUserCheckAll:false,
      sttleUserOptions:STTLE_USER_OPTIONS,
      billingKey:[],
      billingCheckAll:false,
      billingOptions:BILLING_OPTIONS,
      sttleGrantKey:[],
      sttleGrantCheckAll:false,
      sttleGrantOptions:STTLE_GRANT_OPTIONS,
    }
  },
  mounted () {
    this.getFiledData();
  },
   computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    clearData(){
      let {
        signKey,
        signCheckAll,
        taskUserKey,
        taskUserCheckAll,
        taskEnrollKey,
        taskEnrollCheckAll,
        taskSttleKey,
        taskSttleCheckAll,
        sttleKey,
        sttleCheckAll,
        sttleUserKey,
        sttleUserCheckAll,
        billingKey,
        billingCheckAll,
        sttleGrantKey,
        sttleGrantCheckAll
      } = this;
      signKey = [];
        taskUserKey = [];
        taskEnrollKey = [];
        taskSttleKey = [];
        sttleKey = [];
        sttleUserKey = [];
        billingKey = [];
        sttleGrantKey = [];
        signCheckAll=false;
        taskUserCheckAll=false;
        taskEnrollCheckAll=false;
        taskSttleCheckAll=false;
        sttleCheckAll=false;
        sttleUserCheckAll=false;
        billingCheckAll=false;
        sttleGrantCheckAll=false;
    },
    signCheckAllChange(e){
      let options = this.signOptions.map(v=>v.value);
      Object.assign(this, {
        signKey: e.target.checked ? options : [],
        signCheckAll: e.target.checked,
      });
    },
    taskUserCheckAllChange(e){
      let options = this.taskUserOptions.map(v=>v.value);
      Object.assign(this, {
        taskUserKey: e.target.checked ? options : [],
        taskUserCheckAll: e.target.checked,
      });
    },
    taskEnrollCheckAllChange(e){
      let options = this.taskEnrollOptions.map(v=>v.value);
      Object.assign(this, {
        taskEnrollKey: e.target.checked ? options : [],
        taskEnrollCheckAll: e.target.checked,
      });
    },
    taskSttleCheckAllChange(e){
      let options = this.taskSttleOptions.map(v=>v.value);
      Object.assign(this, {
        taskSttleKey: e.target.checked ? options : [],
        taskSttleCheckAll: e.target.checked,
      });
    },
    sttleCheckAllChange(e){
      let options = this.sttleOptions.map(v=>v.value);
      Object.assign(this, {
        sttleKey: e.target.checked ? options : [],
        sttleCheckAll: e.target.checked,
      });
    },
    sttleUserCheckAllChange(e){
      let options = this.sttleUserOptions.map(v=>v.value);
      Object.assign(this, {
        sttleUserKey: e.target.checked ? options : [],
        sttleUserCheckAll: e.target.checked,
      });
    },
    billingCheckAllChange(e){
      let options = this.billingOptions.map(v=>v.value);
      Object.assign(this, {
        billingKey: e.target.checked ? options : [],
        billingCheckAll: e.target.checked,
      });
    },
    sttleGrantCheckAllChange(e){
      let options = this.sttleGrantOptions.map(v=>v.value);
      Object.assign(this, {
        sttleGrantKey: e.target.checked ? options : [],
        sttleGrantCheckAll: e.target.checked,
      });
    },
    async saveSubmit(){
      let {
        signKey,
        taskUserKey,
        taskEnrollKey,
        taskSttleKey,
        sttleKey,
        sttleUserKey,
        billingKey,
        sttleGrantKey
      } = this;
      let fieldsignKey = [];
      if(signKey.length >= 1){
        signKey.forEach(v => {
          let mode = {};
          mode.module = 'signKey';
          mode.filedName = v;
          fieldsignKey.push(mode);
        });
      }
       let fieldtaskUserKey = [];
      if(taskUserKey.length >= 1){
        taskUserKey.forEach(v => {
           let mode = {};
          mode.module = 'taskUserKey';
          mode.filedName = v;
          fieldtaskUserKey.push(mode)
        });
      }
       let fieldtaskEnrollKey = [];
      if(taskEnrollKey.length >= 1){
        taskEnrollKey.forEach(v => {
           let mode = {};
          mode.module = 'taskEnrollKey';
          mode.filedName = v;
          fieldtaskEnrollKey.push(mode)
        });
      }
      let fieldtaskSttleKey = [];
      if(taskSttleKey.length >= 1){
        taskSttleKey.forEach(v => {
           let mode = {};
          mode.module = 'taskSttleKey';
          mode.filedName = v;
          fieldtaskSttleKey.push(mode);
        });
      }
      let fieldsttleKey = [];
       if(sttleKey.length >= 1){
       sttleKey.forEach(v => {
        let mode = {};
          mode.module = 'sttleKey';
          mode.filedName = v;
          fieldsttleKey.push(mode)
        });
      }
       let fieldsttleUserKey = [];
      if(sttleUserKey.length >= 1){
        sttleUserKey.forEach(v => {
           let mode = {};
          mode.module = 'sttleUserKey';
          mode.filedName = v;
           fieldsttleUserKey.push(mode);
        });
      }
       let fieldbillingKey = [];
      if(billingKey.length >= 1){
       billingKey.forEach(v => {
         let mode = {};
          mode.module = 'billingKey';
          mode.filedName = v;
           fieldbillingKey.push(mode);
        });
      }
      let fieldsttleGrantKey = [];
      if(sttleGrantKey.length >= 1){
       sttleGrantKey.forEach(v => {
         let mode = {};
          mode.module = 'sttleGrantKey';
          mode.filedName = v;
          fieldsttleGrantKey.push(mode);
        });
      }
      let params = {};
      params.roleId = this.$route.query.roleId;
      params.fieldAuthorityInfos = fieldsignKey.concat(fieldtaskUserKey,fieldtaskEnrollKey,fieldtaskSttleKey,fieldsttleKey,fieldsttleUserKey,fieldbillingKey,fieldsttleGrantKey);
      console.log(params)
      const {code} = await sysBaseFiledAdd(params);
      if(code == '1'){
        this.$message.success('操作成功');
        this.close();
      }
    },
    async getFiledData(){
      this.clearData();
      const {code,data} = await sysBaseGetRoleIdFiled(this.$route.query.roleId);
      if(code == '1'){
        if(data){
          for(var keys in data){
            this[keys] = data[keys]
          }
        }
      }
    },
    initAllCheck(){
      let {
        signKey,
        taskUserKey,
        taskEnrollKey,
        taskSttleKey,
        sttleKey,
        sttleUserKey,
        billingKey,
        sttleGrantKey,
      } = this;
      let signOptionsMap = SIGN_OPTIONS.map(v=>v.value);
      if(signOptionsMap.length == signKey.length){
        this.signCheckAll = true;
      }
      let taskUserOptionsMap = TASK_USER_OPTIONS.map(v=>v.value);
      if(taskUserOptionsMap.length == taskUserKey.length){
        this.taskUserCheckAll = true;
      }
      let taskEnrollOptionsMap = TASK_ENROLL_OPTIONS.map(v=>v.value);
      if(taskEnrollOptionsMap.length == taskEnrollKey.length){
        this.taskEnrollCheckAll = true;
      }
      let taskSttleOptionsMap = TASK_STTLE_OPTIONS.map(v=>v.value);
      if(taskSttleOptionsMap.length == taskSttleKey.length){
        this.taskSttleCheckAll = true;
      }
      let sttleOptionsMap = STTLE_OPTIONS.map(v=>v.value);
      if(sttleOptionsMap.length == sttleKey.length){
        this.sttleCheckAll = true;
      }
      let sttleUserOptionsMap = STTLE_USER_OPTIONS.map(v=>v.value);
      if(sttleOptionsMap.length == sttleUserKey.length){
        this.sttleUserCheckAll = true;
      }
      let billingOptionsMap = BILLING_OPTIONS.map(v=>v.value);
      if(billingOptionsMap.length == billingKey.length){
        this.billingCheckAll = true;
      }
      let sttleGrantOptionsMap = STTLE_GRANT_OPTIONS.map(v=>v.value);
      if(sttleGrantOptionsMap.length == sttleGrantKey.length){
        this.sttleGrantCheckAll = true;
      }
    },
    close(){
      setTimeout(()=>{
        this.$router.push({name:this.$route.query.flag});
      },2000)
    },
  }
}
</script>
<style>
.footer-btn{
    position: fixed;
    bottom: 24px;
    background: #fff;
    right: 24px;
    z-index: 99;
    padding: 24px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.12);
    box-shadow: 0 0 10px rgba(0,0,0,.12);
    text-align: right;
}
</style>

